<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>系统界面</title>
	<meta name="keywords" content="表格"/>
	<link href="/css/bootstrap.min.css" rel="stylesheet">
	<link href="/css/font-awesome.css" rel="stylesheet">
	<link href="/css/datatables.min.css" rel="stylesheet">
	<link href="/css/animate.css" rel="stylesheet">
	<link href="/css/style.css" rel="stylesheet">
	<script src="/js/vue.js"></script>

</head>
<body>
<div id="wrapper">
	<nav class="navbar-default navbar-static-side">
		<div class="sidebar-collapse">
			<ul class="nav metismenu" id="side-menu">
				<li style="margin-left: 80px;margin-top: 30px;">
					<div class="dropdown profile-element"> <span>
									<img alt="image" class="img-circle"
										 src="http://www.inspinia.net/img/profile_small.jpg"/>
								</span>

						<span class="clear"> <span class="block m-t-xs">
										<strong style="color: white;">用户:{{user.userName}}</strong>
									</span>
								</span>


					</div>

				</li>

				<li>
					<a shiro:hasPermission="xt:gl" href="index.html"><i class="glyphicon glyphicon-asterisk"></i>
						<span class="nav-label">系统管理</span>
					</a>

					<ul class="nav nav-second-level">

						<li><a href="javascript:openUrl('/admin/userInfo')"><i class="glyphicon glyphicon-user"></i>用户管理</a>
						</li>
						<li><a href="javascript:openUrl('/admin/departmentInfo')"><i
								class="glyphicon glyphicon-minus-sign"></i>部门管理</a></li>
						<li>
							<a href="index.html"><i class="glyphicon glyphicon-inbox"></i><span class="nav-label">权限管理</span></a>
							<ul class="nav nav-third-level">
								<li><a href="javascript:openUrl('/admin/permissionInfo')"><i
										class="glyphicon glyphicon-wrench"></i>权限设置</a></li>
							</ul>

							<ul class="nav nav-third-level">
								<li><a href="javascript:openUrl('/admin/departmentPermission')"><i
										class="glyphicon glyphicon-tasks"></i>权限分配</a></li>
							</ul>
						</li>

					</ul>
				</li>
				<!--考勤管理-->
				<li>
					<a href="index.html"><i class="glyphicon glyphicon-edit"></i>
						<span class="nav-label">考勤管理</span>
					</a>
					<ul class="nav nav-second-level">
						<li><a href="javascript:openUrl('/kaoqingone')"><i class="glyphicon glyphicon-tags"></i>自己的考勤记录</a></li>
						<li><a shiro:hasPermission="kqAll" href="javascript:openUrl('/table')"><i
								class="glyphicon glyphicon-folder-close"></i>所有人的考勤记录</a></li>
					</ul>
				</li>
				<!--						###################################预定管理################################################-->
				<li>
					<a shiro:hasPermission="yd:gl" href="index.html"><i class="glyphicon glyphicon-asterisk"></i>
						<span class="nav-label">预定管理</span>
					</a>

					<ul class="nav nav-second-level">
						<li><a href="javascript:openUrl('/tablelist')"></i>预定桌位</a></li>
					</ul>

				</li>
				<!--						###################################################################################-->
				<li>
					<a href="index.html"><i class="glyphicon glyphicon-user"></i>
						<span class="nav-label">员工管理</span>

					</a>

					<ul class="nav nav-second-level">
						<li><a shiro:hasPermission="yg:gl" href="javascript:openUrl('/personnel')"><i class="glyphicon glyphicon-tags"></i>员工基本信息维护</a></li>
						<li><a href="javascript:openUrl('/user')"><i class="glyphicon glyphicon-tags"></i>本人信息</a></li>
					</ul>
				</li>
				<!--						###################################################################################-->
				<li>
					<a shiro:hasPermission="vip:gl" href="index.html"><i class="glyphicon glyphicon-user"></i>
						<span class="nav-label">会员管理</span>
					</a>
					<ul class="nav nav-second-level">
						<li><a href="javascript:openUrl('/vids/listPage')"><i class="glyphicon glyphicon-tags"></i>会员信息维护界面</a>
						</li>
					</ul>
				</li>
				<li>
					<a shiro:hasPermission="cw:gl" href="index.html"><i class="glyphicon glyphicon-user"></i>
						<span class="nav-label">财务管理</span>
					</a>
					<ul class="nav nav-second-level">
						<li><a href="javascript:openUrl('/moneyPage/dayMoneyPage')"><i
								class="glyphicon glyphicon-tags"></i>日结算明细表</a></li>
						<li><a href="javascript:openUrl('/moneyPage/costPage')"><i class="glyphicon glyphicon-tags"></i>营业成本分析</a>
						</li>
					</ul>
				</li>
				<!--						###################################################################################-->


				<li>
					<a shiro:hasPermission="ck:gl" href="index.html"><i class="glyphicon glyphicon-user"></i>
						<span class="nav-label">仓库管理</span>

					</a>

					<ul class="nav nav-second-level">

						<li><a href="javascript:openUrl('/web/storeHouse.html')"><i
								class="glyphicon glyphicon-tags"></i>库存管理</a></li>

						<li><a href="javascript:openUrl('/web/rows.html')"><i
								class="glyphicon glyphicon-folder-close"></i>原料管理</a></li>

						<li><a href="javascript:openUrl('/web/purchase.html')"><i
								class="glyphicon glyphicon-folder-close"></i>进货管理</a></li>

						<li><a href="javascript:openUrl('/web/warehousing.html')"><i
								class="glyphicon glyphicon-folder-close"></i>入库记录表</a></li>

						<li><a href="javascript:openUrl('/web/tuihuo.html')"><i
								class="glyphicon glyphicon-folder-close"></i>退货记录表</a>

						<li><a href="javascript:openUrl('/web/expenditure.html')"><i
								class="glyphicon glyphicon-folder-close"></i>支出记录表</a></li>


					</ul>

						</li>
						<!--						###################################菜品管理################################################-->
						<li>
							<a shiro:hasPermission="cp:gl" href="index.html"><i class="glyphicon glyphicon-user"></i>
								<span class="nav-label">菜品管理</span>

							</a>

							<ul class="nav nav-second-level">

								<li><a href="javascript:openUrl('/caiping')"><i class="glyphicon glyphicon-tags"></i>菜品管理</a></li>

							</ul>
							<ul class="nav nav-second-level">

								<li><a href="javascript:openUrl('/categoryList')"><i class="glyphicon glyphicon-tags"></i>种类管理</a></li>

							</ul>

				</li>



						<!--						###################################################################################-->
						<!--						###################################菜品管理################################################-->
						<li>
							<a shiro:hasPermission="sc:gl" href="index.html"><i class="glyphicon glyphicon-user"></i><span class="nav-label">上菜管理</span>
							</a>
							<ul class="nav nav-second-level">
								<li><a shiro:hasPermission="cpb" href="javascript:openUrl('/shangcaibumen?department=菜品部')"><i class="glyphicon glyphicon-tags"></i>菜品部</a></li>
							</ul>
							<ul class="nav nav-second-level">
								<li><a shiro:hasPermission="jsb" href="javascript:openUrl('/shangcaibumen?department=酒水部')"><i class="glyphicon glyphicon-tags"></i>酒水部</a></li>
							</ul>
							<ul class="nav nav-second-level">
								<li><a shiro:hasPermission="tdb" href="javascript:openUrl('/shangcaibumen?department=甜点部')"><i class="glyphicon glyphicon-tags"></i>甜点部</a></li>
							</ul>
						</li>



						<!--						###################################################################################-->
				<!--						###################################################################################-->
				<li>
					<a href="index.html"><i class="glyphicon glyphicon-user"></i>
						<span class="nav-label">差假中心</span>

					</a>

					<ul class="nav nav-second-level">

						<li><a href="javascript:openUrl('/cj')"><i class="glyphicon glyphicon-folder-close"></i>申请差假</a></li>

						<li><a shiro:hasPermission="sh:gl" href="javascript:openUrl('/shenhe')"><i class="glyphicon glyphicon-folder-close"></i>审核差假</a></li>

					</ul>

				</li>


			</ul>

		</div>

	</nav>


	<div id="page-wrapper" class="gray-bg">

		<div class="row border-bottom">

			<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">

				<div class="navbar-header">

					<div style="position: fixed;top:10px;left:30%;">
						<!-- 	<button class="btn btn-primary btn-sm">回到首页</button>
                            <button class="btn btn-primary btn-sm">修改密码</button> -->
						<div style="position: absolute;left:100px;">
							<button class="btn btn-primary btn-sm" onclick="back()">
								<span class="glyphicon glyphicon-home"></span>
								回到首页
							</button>
						</div>
						<div style="position: absolute;left:200px;">
							<button class="btn btn-primary btn-sm" @click="update()">
								<span class="glyphicon glyphicon-user"></span>修改密码
							</button>
						</div>
						<div style="position: absolute;left:300px;">
							<button class="btn btn-primary btn-sm" type="button" onclick="exits()">
								<span class="glyphicon glyphicon-asterisk"></span>
								退出系统
							</button>
						</div>
						<div style="position: absolute;left:800px;width: 400px;">
							<h4>欢迎使用xx酒店管理系统</h4>
						</div>

					</div>

				</div>
			</nav>

		</div>


		<iframe style="height: 700px;border:  solid 1px white;" scrolling="auto" rameborder="0" src="/admin/signPage"
				name="right" width="100%" height="100%">
		</iframe>
	</div>
	<!-- 模态框开始 -->
	<div id="one" class="modal fade" style="top:200px">
		<div class="modal-dialog">
			<div class="modal-content">
				<!--头部-->
				<div class="modal-header">
					<h4 align="center">修改密码</h4>

				</div>
				<!--主题内容-->
				<div class="modal-body">
					<form role="form" class="form-horizontal">
						<div class="form-group">
							<label class=" col-sm-3 control-label">用户名</label>
							<div class=" col-sm-8">
								<input type="text" class="form-control" v-model="user.userName" disabled="disabled">
							</div>
						</div>

						<div class="form-group">
							<label class=" col-sm-3 control-label">旧密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" v-model="password" placeholder="请输入旧密码"
									   v-on:keyup="enter()">
							</div>
							<label class="col-sm-11 control-label" id='oldSpan'><span class="label label-danger" hidden>密码错误</span></label>
						</div>

						<div class="form-group">
							<label class=" col-sm-3 control-label">新密码</label>
							<div class=" col-sm-8">
								<input type="password" class="form-control" v-model="newPassword" placeholder="请输入新密码"
									   required="required" v-on:keyup="enter()">
							</div>
							<label class="col-sm-11 control-label" id='newSpan'><span class="label label-danger" hidden>请输入新密码</span></label>
							<label class="col-sm-11 control-label" id='checkSpan'><span class="label label-danger"
																						hidden>新密码与旧密码一致</span></label>
						</div>

						<div class="form-group">
							<label class=" col-sm-3 control-label">确认新密码</label>
							<div class=" col-sm-8">
								<input type="password" class="form-control" v-model="confirmPassword"
									   placeholder="请再次输入新密码" required="required" v-on:keyup="enter()">
							</div>
							<label class="col-sm-11 control-label" id='reSpan'><span class="label label-danger" hidden>两次密码不一致</span></label>
						</div>

						<div class="form-group">
							<label class=" col-sm-3 control-label">验证邮箱</label>
							<div class=" col-sm-8">
								<input type="email" id="email" class="form-control" v-model="user.sysEmail" disabled/>
							</div>
						</div>

						<div class="form-group">
							<label class=" col-sm-3 control-label">验证码</label>
							<div class=" col-sm-8">
								<input type="text" class="form-control" v-model="code.checkCode"
									   placeholder="请输入验证码" required="required">
							</div>
						</div>

					</form>
				</div>

				<!--底部-->
				<div class="modal-footer">
					<button class="btn btn-primary btn-sm" type="button" @click="sendCode"><span
							class="glyphicon glyphicon-envelope"></span>发送验证码
					</button>
					<button class="btn btn-primary btn-sm" type="button" @click="closeWin"><span
							class="glyphicon glyphicon-remove"></span>关闭
					</button>
					<button class="btn btn-primary btn-sm" @click="saveUser"><span
							class="glyphicon glyphicon-save"></span>保存
					</button>
				</div>

			</div>
		</div>
	</div>
</div>


<!-- Mainly scripts -->

<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.metisMenu.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/datatables.min.js"></script>
<script src="/js/inspinia.js"></script>
<script src="/js/pace.min.js"></script>
</body>

<script>
	//打开页面
	function openUrl(url) {
		$("iframe").attr("src", url);
	}

	//显示模态框
	function update() {
		$("#one").modal("show")
		$('#oldSpan').addClass('hidden');
		$('#newSpan').addClass('hidden');
		$('#checkSpan').addClass('hidden');
		$('#reSpan').addClass('hidden');
	}

	function back() {
		window.location.href = "/admin/indexPage";
	}

	function exits() {
		window.location.href = "/exit";
	}

	new Vue({
		el: "#wrapper",
		data: {
			user: {
				userName: "",
				sysEmail: "",
				password: "",
			},
			password: "",
			newPassword: "",
			confirmPassword: "",
			code: {
				checkCode: ""
			},
			title: "修改密码"
		},
		methods: {
			loadData: function () {
				var self = this;
				$.ajax({
					url: "/user/userName",
					type: "post",
					dataType: "json",
					success: function (data) {
						self.user.userName = data.userName;
						self.user.password = data.password;
						self.password = "";
						self.newPassword = "";
						self.confirmPassword = ""
					}
				})
				$.ajax({
					url:"/examine",
					type:"get",
					dataType:"json",
					success:function (data) {

						confirm(data.message)
					}
				})
			},
			getEmail: function () {
				var self = this;
				$.ajax({
					url: "/user/sysId",
					type: "post",
					dataType: "json",
					success: function (data) {
						self.user.sysEmail = data.sysEmail;
					}
				})
			},
			sendCode: function () {//发送验证码
				var self = this;
				$.ajax({
					url: "/email/sendCode",
					type: "post",
					contentType: "application/x-www-form-urlencoded",
					data: {"email": self.user.sysEmail},
					dataType: "json",
					success: function (data) {
						alert(data.info)
					}
				})
			},
			enter: function () {
				$('#oldSpan').addClass('hidden');
				$('#newSpan').addClass('hidden');
				$('#checkSpan').addClass('hidden');
				$('#reSpan').addClass('hidden');
			},
			saveUser: function () {//保存
				var self = this;
				var email = document.getElementById("email").value;
				var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if (self.password != self.user.password) {
					$('#oldSpan').removeClass('hidden');
				} else if (self.newPassword == "") {
					$('#newSpan').removeClass('hidden');
				} else if (self.newPassword == self.user.password) {
					$('#checkSpan').removeClass('hidden');
				} else if (self.confirmPassword != self.newPassword) {
					$('#reSpan').removeClass('hidden');
				} else {
					if (regex.test(email)) {
						$.ajax({
							url: "/email/checkCode",
							type: "post",
							contentType: "application/x-www-form-urlencoded",
							data: {"code": self.code.checkCode},
							dataType: "json",
							success: function (data) {
								if (data.info == "验证码错误") {
									alert(data.info);
								} else {
									var url = "/userReful/updatePwd";
									$.ajax({
										url: url,
										type: "post",
										contentType: "application/x-www-form-urlencoded",
										data: {"pwd": self.confirmPassword, "sysName": self.user.userName},
										dataType: "json",
										success: function (data) {
											console.log(data);
											alert(data.info);
											if (data.info == "修改成功") {
												//关闭模态框
												$("#one").modal("hide")
												//刷新
												self.loadData();
											}
										}

									})
								}
							}
						})

					} else {
						alert("邮箱不正确");
					}
				}
			},
			closeWin: function () {//关闭模态框
				$("#one").modal("hide")
				this.loadData();
			}
		},
		mounted() {
			this.loadData();
			this.getEmail();
		}
	})
</script>
</html>
